<template>
  <div class="main-container">
    <div class="products-list">
      <div
        v-for="product in paginatedProducts"
        :key="product.id"
        class="product-item"
      >
        <el-card 
          class="box-card"
          @click="productDetail(product)"
          :body-style="{ padding: '0', display: 'flex', flexDirection: 'column', height: '100%' }"
        >
          <div class="image-container">
            <img :src="product.imageUrl" alt="product image" class="product-image" />
          </div>
          <div class="product-info">
            <div class="info-header">
              <h3 class="product-title">{{ product.productName }}</h3>
              <span class="product-price">¥{{ product.price }}</span>
            </div>
            <p class="product-description">{{ product.description }}</p>
            <div class="product-footer">
              <el-button class="detail-btn" type="text">查看详情 →</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </div>

<!-- 修改后的分页组件 -->
    <div class="fixed-pagination">
      <el-pagination
        v-model:current-page="pageInfo.page"
        v-model:page-size="pageInfo.size"
        :page-sizes="[6, 9, 12 ]"
        :total="totalCount"
        layout="total, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script>
import productApi from "@/api/product.js";

export default {
  data() {
    return {
      products: [],
      totalCount: 0,
      pageInfo: {
        page: 1,
        size: 6
      }
    };
  },
  computed: {
    paginatedProducts() {
      const start = (this.pageInfo.page - 1) * this.pageInfo.size;
      return this.products.slice(start, start + this.pageInfo.size);
    }
  },
  created() {
    this.fetchProducts();
  },
  methods: {
    productDetail(product) {
      this.$router.push({ name: 'productDetail', query: { productId: product.productId } });
    },
    async fetchProducts() {
      try {
        const res = await productApi.list(this.pageInfo);
        this.products = res.data.records || [];
        this.totalCount = res.data.total || 0;
      } catch (error) {
        console.error('加载数据失败:', error);
      }
    },
    handlePageChange(page) {
      this.pageInfo.page = page;
      this.fetchProducts();
    },
    handleSizeChange(size) {
      this.pageInfo.size = size;
      this.pageInfo.page = 1;
      this.fetchProducts();
    }
  }
}
</script>

<style scoped>
.main-container {
  width: 100%;
  overflow: hidden; /* 禁止内部滚动 */
  min-height: calc(100vh - 90px);
  position: relative;
  padding: 20px;
}

.products-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 4列布局 */
  gap: 20px; /* 项目间距 */
  /* margin-top: 70px;
  margin-bottom: 150px; */
}

.product-item {
  height: 100%;
  width: 100%;
}

.box-card {
  height: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.box-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.image-container {
  width: 100%;
  height: 180px; /* 固定图片高度 */
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.box-card:hover .product-image {
  transform: scale(1.05);
}

.product-info {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.product-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 180px; /* 固定宽度而不是百分比 */
  flex-shrink: 0; /* 禁止缩小 */
}

.product-price {
  font-size: 16px;
  color: #e74c3c;
  font-weight: bold;
}

.product-description {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.product-footer {
  display: flex;
  justify-content: space-between; /* 保持左右两端对齐 */
  align-items: center;
  margin-top: auto; /* 确保footer在底部 */
}

.product-tag {
  background: #fff0f0;
  color: #ff6b6b;
  padding: 4px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
}

.detail-btn {
  margin-left: auto;
  color: #409EFF;
  padding: 0;
  font-size: 13px;
}

.detail-btn:hover {
  color: #66b1ff;
}

.pagination-container {
  margin-top: 30px;
  text-align: center;
}
.fixed-pagination {
  position: fixed;
  bottom: 50px;
  left: 0;
  right: 0;
  padding: 10px 20px;
  z-index: 100;
  display: flex;
  justify-content: center;
}

@media (max-width: 1200px) {
  .products-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .products-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .products-list {
    grid-template-columns: 1fr;
  }
}
</style>